<template>
    <div>
        <a-modal
            :title="!isView?'汇总审评计划':'汇总审评计划详情'"
            :visible="visible"
            :confirm-loading="confirmLoading"
            @ok="handleOk"
            @cancel="visible = false"
            :width="900"
            :dialogStyle="{top:'40px'}"
            class="initiateRegistrationComp-modal-box"
        >
            <template slot="footer">
                <div style="display: flex;justify-content: flex-end;">
                    <a-button style="margin-right: 10px;" @click="visible = false">关闭</a-button>
                    <a-button style="margin-right: 10px;" v-if="!isView" class="blue-btn" type="primary" @click="handleOk(false)">暂存并关闭</a-button>
                    <a-button v-if="!isView" class="blue-btn" type="primary" @click="handleOk(true)">发布并关闭</a-button>
                </div>
            </template>
            <div class="initiateRegistrationComp-box">
                <a-form-model
                    :id="randomId"
                    class="form-model-big-box form-model-big-box1"
                    ref="initiateRegistrationCompForm"
                    :model="currentRow"
                    :rules="rules"
                    layout="inline"
                    style="margin: 0 15px;width: 100%;"
                >
                    <a-form-model-item ref="fjhmc" label="计划名称" prop="fjhmc" class="form-item-flex-1">
                        <a-textarea 
                            v-model="currentRow.fjhmc"
                            :autosize="{ minRows: 2, maxRows: 10000 }"
                            placeholder="请输入计划名称"
                            v-if="!isView"
                        ></a-textarea>
                        <span v-else style="display: inline-block;margin-top: 5px;">{{ currentRow.fjhmc }}</span>
                    </a-form-model-item>
                    <!-- <a-form-model-item label="审评员类型" class="form-item-flex-1">
                        {{ currentRow.fjcylx }}
                        <div style="display: flex;align-items: center;margin-top: 4px;">
                            <a-radio-group name="jcylxradioGroup" v-model:value="currentRow.fjcylx">
                                <a-radio v-for="(item,index) in vxeOptionsArr" :key="index" :value="item.itemValue">{{ item.itemValue }}</a-radio>
                            </a-radio-group>
                        </div>
                    </a-form-model-item> -->
                    <a-form-model-item label="报名日期" required prop="fbmksrqArr">
                        <a-range-picker v-if="!isView" v-model="currentRow.fbmksrqArr" style="width: 100%;" />
                        <span v-else>{{ moment(currentRow.fbmksrqArr[0]).format('YYYY-MM-DD') }}至{{ moment(currentRow.fbmksrqArr[1]).format('YYYY-MM-DD') }}</span>
                    </a-form-model-item>
                    <a-form-model-item label="计划状态" v-if="isView">
                        <span style="display: inline-block;margin-top: 5px;">
                            <span v-if="currentData.fbmzt == '已发布'" style="color: #66c24f;border: 1px solid #66c24f;border-radius: 20px;padding:0 5px;">已发布</span>
                            <span v-if="currentData.fbmzt == '已结束'" style="color: #ed5565;border: 1px solid #ed5565;border-radius: 20px;padding:0 5px;">已结束</span>
                            <span v-if="currentData.fbmzt == '未发布'" style="color: #faad14;border: 1px solid #faad14;border-radius: 20px;padding: 0 5px;">未发布</span>
                            <span v-if="currentData.fbmzt == '已作废'" style="color: #a5a1a1;border: 1px solid #a5a1a1;border-radius: 20px;padding: 0 5px;">已作废</span>
                        </span>
                    </a-form-model-item>
                    <!-- <a-form-model-item label="报名结束日期" required prop="fbmjsrq">
                        <a-date-picker
                            v-model="currentRow.fbmjsrq"
                            style="min-width: 184px;"
                            show-time
                            type="date"
                            placeholder="请选择时间"
                        />
                    </a-form-model-item> -->
                    <!-- <a-form-model-item label="审评要求" prop="fjcyq" class="form-item-flex-1">
                        <a-textarea 
                            v-model="currentRow.fjcyq"
                            :autosize="{ minRows: 3, maxRows: 10000 }"
                            placeholder="请输入审评要求"
                        ></a-textarea>
                    </a-form-model-item> -->
                    <!-- <a-form-model-item label="组长人数" prop="fzzrs">
                        <a-input-number v-model:value="currentRow.fzzrs" :min="0" :precision="0" placeholder="组长人数" />
                    </a-form-model-item>
                    <a-form-model-item label="组员人数" prop="fzyrs">
                        <a-input-number v-model:value="currentRow.fzyrs" :min="0" :precision="0" placeholder="组员人数"/>
                    </a-form-model-item>
                    <a-form-model-item label="预备审评员人数" prop="fybrs">
                        <a-input-number v-model:value="currentRow.fybrs" :min="0" :precision="0" placeholder="预备审评员人数"/>
                    </a-form-model-item> -->
                </a-form-model>
                <commpVxeTable
                    :key="manualKey"
                    :isCanWrap="true"
                    :canWrapTableHeight="320"
                    :config="manualdataTableConfig" 
                    :columns="manualcolumnsVxe" 
                    :formItem="[]"
                    ref="acceptanceRegistrationRef"
                >
                    <!-- <template v-slot:externalOperations="{data}">
                        <vxe-form-item>
                            <template>
                                <a-button class="blue-btn" type="primary" icon="plus-square" @click="addInspectionTaskClick({})">添加审评任务</a-button>
                            </template>
                        </vxe-form-item>
                    </template> -->
                    <template v-slot:fcykssj_fcyjssj="{row}">
                        {{ row.fcykssj }}至{{ row.fcyjssj }}<br/>
                        <span v-if="row.fcykssj">（{{moment(row.fcykssj).format('dddd')}}&nbsp;&nbsp;至&nbsp;&nbsp;{{moment(row.fcyjssj).format('dddd')}}）</span>
                    </template>
                    <template v-slot:realname_name="{row}">
                        <!-- <a @click="viewClick(row,true)"> -->
                            <span style="padding-right: 21;" v-if="row.realname && row.realname.length == 2">
                                <span v-for="(trem,tI) in row.realname.split('')" :key="tI" >
                                    {{trem}}
                                <span v-if="tI+1 !== row.realname.split('').length">&nbsp;&nbsp;</span>
                                </span>
                            </span>
                            <span style="padding-right: 21;" v-else>{{ row.realname }}</span>
                        <!-- </a> -->
                    </template>
                    <template v-slot:fstate_default="{row}">
                        {{ row.fstate=='0'?'执行中':(row.fstate=='1'?'已结束':'') }}
                    </template>
                    <template v-slot:operation_btn="{row}">
                        <a-form layout="inline" class="search-form" >
                            <a-form-item >
                                <a-button class="blue-btn" type="primary" @click="addInspectionTaskClick(row)">编辑</a-button>
                            </a-form-item>
                            <a-form-item >
                                <a-button class="blue-btn" type="primary" @click="detailsClick(row)">详情</a-button>
                            </a-form-item>
                            <a-form-item >
                                <a-button v-if="row.fbmzt == '报名中'" class="red-btn" type="primary" @click="deleteInspectionTaskClick(row)">删除</a-button>
                            </a-form-item>
                        </a-form>
                    </template>
                </commpVxeTable>
            </div>
        </a-modal>
    </div>
</template>
<script>
import { ybmjhaddBmjbxx, ocalityPostAction, ybmjhupdateBmjbxx, ybmjhhzjcjhAdd, ybmjhfbbmjhjbxx, } from './service/index'
import commpVxeTable from '@/components/commp-vxe-table/commp-vxe-table.vue'
import moment from 'moment'
import assessCheckApi from './service/api'
export default {
    components:{
        commpVxeTable,
    },
    props:{

    },
    data(){
        return{
            moment:moment,
            visible:false,
            confirmLoading:false,
            randomId:'formModel'+new Date().getTime(),
            currentRow:{},
            currentData:{},
            rules: {
                fjhmc: [{ required: true, message: '请输入计划名称', trigger: 'blur' }],
                fbmksrqArr: [{ type: 'array', required: true, message: '请选择报名日期', trigger: 'change' }],
                fjcylx: [{ required: true, message: '请选择审评员类型', trigger: 'change' }],
                // fjcyq: [{ required: true, message: '请输入审评要求', trigger: 'blur' }],
            },
            vxeOptionsArr:[],
            manualKey:null,
            manualformItem:[],
            manualdataTableConfig:{
                api: assessCheckApi.ybmjhhzjcjhList,
                rowId: 'id',
                fywflcode:'001002',
                height:window.innerHeight - 400,
                paramet:{},
                isIdeaText:'',
                autoHidden:true,
            },
            manualcolumnsVxe:[{
                title: '审评类型', //列头显示文字
                field: 'fsxjclx',
            },{
                title: '审评日期', //列头显示文字
                field: 'fcykssj',
                width:195,
                slots: {
                    default: 'fcykssj_fcyjssj',
                },
            },{
                title: '审评地点', //列头显示文字
                field: 'fjcdd',
                
            },{
                title: '审评要求', //列头显示文字
                field: 'fjcyq',
            }], 
            isView:false,
        }
    },
    watch:{

    },
    mounted(){
        
    },
    methods:{
        getData(row,val){
            this.isView = val
            this.currentData = row
            this.currentRow = {
                id:row.id?row.id:'',
                fjhmc:row.fjhmc,
                fjcylx:row.fjcylx,
                fbmksrqArr:row.fbmksrq?[row.fbmksrq?moment(row.fbmksrq):undefined,row.fbmjsrq?moment(row.fbmjsrq):undefined]:[],
                fzzrs:row.fzzrs?row.fzzrs:0,
                fzyrs:row.fzyrs?row.fzyrs:0,
                fybrs:row.fybrs?row.fybrs:0,
            }
            if(row.id){
                this.manualdataTableConfig.api = assessCheckApi.ybmjhqueryBmjhListByJbxxid
                this.manualdataTableConfig.paramet = {id:row.id,}
                this.manualcolumnsVxe[0].field = 'fjcylx'
            }else{
                this.manualdataTableConfig.api = assessCheckApi.ybmjhhzjcjhList
                this.manualdataTableConfig.paramet = {}
                this.manualcolumnsVxe[0].field = 'fsxjclx'
            }
            this.confirmLoading = false
            // 检查员登记类别
            ocalityPostAction({dictName:'检查员登记类别'}).then(res=>{
                //console.log('字典的res',res)
                if(res.code == 200){
                    if(res.result.length){
                        this.vxeOptionsArr = res.result
                    }
                    
                }
            })
            this.manualKey = Date.now()
        },
        handleOk(val){
            this.$refs.initiateRegistrationCompForm.validate(valid => {
                if (valid) {
                    // if(this.currentRow.fzzrs || this.currentRow.fzyrs || this.currentRow.fybrs){
                        let data = {
                            ...this.currentRow,
                            fbmksrq:moment(this.currentRow.fbmksrqArr[0]).format('YYYY-MM-DD'),
                            fbmjsrq:moment(this.currentRow.fbmksrqArr[1]).format('YYYY-MM-DD'),
                            fbmksrqArr:''
                        }
                        if(val){
                            ybmjhhzjcjhAdd(data).then(res=>{
                                if(res.code == 200){
                                    ybmjhfbbmjhjbxx({id:res.result}).then(res1=>{
                                        if(res.code == 200){
                                            this.$message.success(res1.message)
                                            this.$emit('initiateRegistrationSuccess')
                                            this.visible = false
                                        }else{
                                            this.$message.warning(res1.message)
                                        }
                                    })
                                }else{
                                    this.$message.warning(res.message)
                                }
                            })
                            
                        }else{
                            ybmjhhzjcjhAdd(data).then(res=>{
                                if(res.code == 200){
                                    this.$message.success(res.message)
                                    this.$emit('initiateRegistrationSuccess')
                                    this.visible = false
                                }else{
                                    this.$message.warning(res.message)
                                }
                            })
                        }
                        
                    // }else{
                    //     this.$message.warning('请输入人数')
                    // }
                    
                } else {
                    //console.log('error submit!!');
                    return false;
                }
            });
            
        },
    }
}
</script>
<style lang="less">
.initiateRegistrationComp-modal-box{
    .ant-modal-body{
        padding: 8px
    }
}
.initiateRegistrationComp-box{
    display: flex;
    flex-wrap: wrap;
    textarea.ant-input{
        margin-top: 4px;
    }
    .ant-form-item{
        // display: flex;
        // align-items: center;
        .ant-form-item-label{
            font-size: 18px;
            font-weight: 600;
            width: 145px;
            font-family:simHei;
            background: #e6f7ff;
        }
        .ant-form-item-control-wrapper{
            vertical-align: middle;
        }
    }
    .toolbox-form-item{
        width: 50%;
        // padding: 3px;
    }
    .ant-form-item-with-help{
        margin-bottom: 10px;
    }
    .form-model-big-box{
        .form-item-flex-1{
            display: flex;
            // align-items: center;
            .ant-form-item-control-wrapper{
                flex: 1;
                // height: 40px;
                
            }
        }
        .ant-form-item-control-wrapper{
            font-family:仿宋_GB2312 !important;
            
            .ant-checkbox-group{
                height: 40px;
                line-height: 40px;
            }
        }
    }
    .form-model-big-box1{
        .ant-form-item-label{
            
            margin: 4px 3px;
            label{
                padding-left: 3px;
                
            }
            
        }
    }
    .ant-form-inline .ant-form-item > .ant-form-item-label{
        vertical-align: middle !important;
    }
    
}
</style>